<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa</title>
    <!--fivicon icon-->
    <%--    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/fevicon.png">--%>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/magnific.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/nice-select.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/owl.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/slick-slide.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/remixicon/remixicon.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/responsive.css">

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap" rel="stylesheet">
    <style>
        .userphone{
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }
        .userphone img{
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }
        .user_data{
            display: none;
            position: absolute;
            text-align: left;
            width: 210px;
            margin: 0;
            padding: 0;
            list-style: none;
            left: 0;
            top: 100%;
            background-color: #fff;
            border-radius: 0;
        }
        .userphone:hover .user_data{
            display: inline-block;
        }
        .user_data:hover{
            display: inline-block;
        }
        .user_data div{
            margin-left: 5px;
            display: block;
            margin-left: 0;
            line-height: 22px;
            font-size: 15px;
            border-bottom: 1px solid #f5f5f5;
            color: #050a30;
            font-weight: 500;
            height: 40px;
        }
        .teet{
            display: block;
            padding: 10px 20px;
            color: #050a30;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }

    </style>

</head>
<body class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div id="wave1">
        </div>
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->
<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <form action="index.jsp" class="search-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
    </form>
</div>
<!-- //. search Popup -->

<!-- navbar start -->
<header class="navbar-area">
    <nav class="navbar navbar-expand-lg">
        <div class="container nav-container">
            <div class="responsive-mobile-menu">
                <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-left"></span>
                    <span class="icon-right"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="themefie_main_menu">
                <ul class="navbar-nav menu-open">
                    <li class="current-menu-item menu-item-has-children">
                        <a href="${pageContext.request.contextPath}/home-1.jsp">HOME</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="${pageContext.request.contextPath}/home-1.jsp">Home 01</a></li>
                        </ul>
                    </li>
                    <li class="current-menu-item menu-item-has-children">
                        <a href="${pageContext.request.contextPath}/#">页面</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="about.jsp">关于</a></li>
                            <li><a href="blog.jsp">博客</a></li>
                            <li><a href="blog-details.jsp">博客详细信息</a></li>
                            <li><a href="/foods.let?type=findall">菜单</a></li>
                            <li><a href="foods.let?type=menuList&pageIndex=1">菜单列表</a></li>
                            <li><a href="shop.let?type=findShop&pageIndex=1">店铺</a></li>
                            <li><a href="cart.jsp" onclick="jiaru()">购物车</a></li>
                            <li><a href="checkout.jsp">Checkout</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="about.jsp">关于我们</a>
                    </li>
                    <li>
                        <a href="contact.jsp">联系人</a>
                    </li>
                </ul>
            </div>
            <div class="logo">
                <a class="main-logo" href="home-1.jsp"><img src="${pageContext.request.contextPath}/assets/img/logo.png" alt="img"></a>
            </div>
            <div class="nav-right-part nav-right-part-mobile">
                <ul>
                    <li><a class="search" href="#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact d-md-block d-none"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">

                    </li>
                </ul>
            </div>
            <div class="nav-right-part nav-right-part-desktop">
                <ul>
                    <li><a class="search" href="${pageContext.request.contextPath}/#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">
                        <c:if test="${user==null}">
                        <a href="${pageContext.request.contextPath}/login.jsp">
                            <img src="${pageContext.request.contextPath}/assets/img/img.png" >
                            </c:if>
                            <c:if test="${user!=null}">
                                <img src="${pageContext.request.contextPath}${user.image}">
                                <div class="user_data">
                                    <div><a href="PersonalCenter/main.jsp" class="teet">个人中心</a></div>
                                    <div><a href="login.let?type=exit" class="teet">退出</a></div>
                                </div>
                            </c:if>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<!-- navbar end -->

<!-- bredcrumb Area Start-->
<section class="breadcrumb-area">
    <div class="banner-bg-img"></div>
    <div class="banner-shape-1"><img src="${pageContext.request.contextPath}/assets/img/banner/shape-1.png" alt="img"></div>
    <div class="banner-shape-2"><img src="${pageContext.request.contextPath}/assets/img/banner/shape-2.png" alt="img"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 align-self-center">
                <div class="banner-inner text-center">
                    <h3>选择您的项目
                    </h3>
                    <h1>发现我们的菜单
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/home.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">菜单列表</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- bredcrumb Area End -->

<!-- populer Area Start-->
<section class="populer-area pd-top-50 pd-bottom-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-8">
                <div class="section-title text-center">
                    <h3 class="sub-title">我们的签名</h3>
                    <h2 class="title">Foodka主菜</h2>
                    <p>在这里，你可以看到你的孩子，你的父母，你的朋友，你的朋友，你的朋友，你的朋友，你的朋友。在这里，你会发现，你是一个很好的朋友。</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <c:forEach items="${foodsList}" var="food">
                <div class="col-lg-6">
                    <div class="single-item-wrap style-2">
                        <div class="media">
                            <div class="thumb">
                                <img src=${food.photo} alt="img">
                            </div>
                            <div class="wrap-details">
                                <h5><a href="foods.let?type=findId&foodId=${food.id}&typeId=${food.type_id}&pageIndex=1">${food.name}</a></h5>
                                <p>${food.describe}</p>
                                <div class="wrap-footer">
                                    <h6 class="price">$${food.price}</h6>
                                    <a href="foods.let?type=findId&foodId=${food.id}&typeId=${food.type_id}&pageIndex=1" ><button type="submit" class="btn btn-secondary">添加到购物车</button></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>

            <div class="col-12">
                <nav>
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="foods.let?type=menuList&pageIndex=${param.pageIndex-1}">
                                <i class="ri-arrow-left-s-line"></i>
                            </a>
                        </li>
                        <c:forEach var="i" begin="1" end="${pageCount}" step="1">
                            <c:if test="${i==param.pageIndex}">
                                <li class="page-item active"><a class="page-link" href="foods.let?type=menuList&pageIndex=${i}">${i}</a></li>
                            </c:if>
                            <c:if test="${i!=param.pageIndex}">
                                <li class="page-item"><a class="page-link" href="foods.let?type=menuList&pageIndex=${i}">${i}</a></li>
                            </c:if>
                        </c:forEach>
                        <li class="page-item">
                            <a class="page-link" href="foods.let?type=menuList&pageIndex=${param.pageIndex+1}">
                                <i class="ri-arrow-right-s-line"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- populer Area End -->

<!-- footer area start -->
<footer class="footer-area pd-top-100">
    <div class="footer-inner padding-top-100 padding-bottom-65">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget">
                        <div class="logo">
                            <img src="${pageContext.request.contextPath}/assets/img/logo.png" alt="img">
                        </div>
                        <ul class="contact_info_list">
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/location.png" alt="icon">
                                <div class="details">
                                    4920 Trails End Road Ft  美国, 佛罗里达州 33311
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/envelope.png" alt="icon">
                                <div class="details">
                                    ordernow@foodka.com
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/phone.png" alt="icon">
                                <div class="details">
                                    +997 509 153 849
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">热门菜单</h4>
                        <ul>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">汉堡王沃珀</a></li>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">五个家伙芝士汉堡</a></li>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">肯德基原始食谱鸡</a></li>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">温迪的霜冻</a></li>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">麦当劳的快乐餐</a></li>
                            <li><a href="${pageContext.request.contextPath}/menu-list.jsp">多米诺的意大利辣香肠比萨饼</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">营业时间</h4>
                        <ul>
                            <li>星期一 : 09.00am-10.00pm</li>
                            <li>星期二 : 09.00am-10.00pm</li>
                            <li>星期三 : 09.00am-10.00pm</li>
                            <li>星期四 : 09.00am-10.00pm</li>
                            <li>星期五  : 09.00am-10.00pm</li>
                            <li>星期六 & 星期天 : <span>关闭</span></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_instagram_feeds">
                        <h4 class="widget-title">Instagram提要</h4>
                        <ul>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/1.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/2.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/3.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/4.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/5.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/6.png" alt="instagram" /></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-md-start text-center">
                    <div class="copyright-area">
                        <p>© 2021年Foodka。Themefie保留所有权利</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <ul class="social-area text-md-end text-center mt-md-0 mt-2">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-behance"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- back-to-top end -->
<div class="back-to-top">
    <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>



<!-- all plugins here -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.3.6.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/imageloded.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/counterup.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/waypoint.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/magnific.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/isotope.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/nice-select.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/fontawesome.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/owl.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/slick-slider.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/tweenmax.min.js"></script>
<!-- main js  -->
<script  src="${pageContext.request.contextPath}/assets/js/main.js"></script>
</body>
</html>